<template>
  <div class="m_right" v-if="userId">
    <p></p>
    <div class="mem_tit">所有订单</div>
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(order, index) in orderList"
        :key="order.id"
        :name="index + 1"
      >
        <!-- :title="`用户名:${orderGroup[0].loginName} 订单号:${orderGroup[0].serialNumber} 地址:${orderGroup[0].userAddress} 商品名:${orderGroup[0].name}`" -->
        <template slot="title">
          <table class="orderTable">
            <tr>
              <td>用户名：{{ order.loginName }}</td>
              <td>订单号: {{ order.serialNumber }}</td>
              <td style="line-height:1rem">地址: &nbsp;&nbsp;{{ order.userAddress }}</td>
              <td>￥: &nbsp;&nbsp;{{ order.cost }}</td>
              <td><span :class="order.isPay == -1 ? 'status1' : (order.isPay == 0 ? 'status2' : (order.isPay == 1 ?'status3' : 'status4'))">{{getOrderStatus(order.isPay)}}</span></td>
            </tr>
          </table>
        </template>
        <div>
          <el-table :data="order.orderDetailList" class="orderDetailTable">
            <el-table-column
              label="商品名称"
              header-align="center"
              align="center"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
              
            </el-table-column>
            <el-table-column
              label="商品图片"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="url + scope.row.fileName"
                  fit="cover"
                  ><div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i></div
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="价格"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.cost }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div style="border: 1px solid #ddd; padding: 1rem; text-align: center; border-radius: 4px;" v-if="order.isPay == 1 && userId == order.userId">
            <a href="javascript:;" @click="refund(order.id, order.serialNumber, order.cost)" style="color: #333; text-decoration: none; font-weight: bold;">点击退款</a>
          </div>
          <div style="border: 1px solid #ddd; padding: 1rem; text-align: center; border-radius: 4px;" v-if="order.isPay == 0">
            <a href="javascript:;" @click="closeOrder(order.id)" style="color: #333; text-decoration: none; font-weight: bold;">点击关闭订单</a>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <br />
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page="1"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
        ><!-- 注意这里pageInfo.total是来自pageHelper的pageinfo，而不是自己封装的pageinfo -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Collapse, CollapseItem, Tag, Table, TableColumn, Icon, Image, Pagination } from "element-ui";
Vue.use(Tag);
Vue.use(Icon);
Vue.use(Image);
Vue.use(Table);
Vue.use(Pagination);
Vue.use(TableColumn);
Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
  data() {
    return {
      userId: null,
      pageNum: 1,
      pageSize: 3,
      orderList: [],
      pageInfo: {},
      activeNames: [],
      url: sessionStorage.getItem("imagesDir")
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllOrderList();
    },
    getAllOrderList() {
      this.$axios({
        url: "/api/order/all",
        method: "post",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((rs) => {
        console.log("所有订单...", rs);
        this.pageInfo = rs.data.pageInfo;
        this.orderList = rs.data.pageInfo.list;
      });
    },
    getOrderStatus(status) { //-1: 已取消， 0：未付款， 1：已付款，2: 已退款  
      return status == -1 ? "已取消" : (status == 0 ? "待付款" : (status == 1 ? "已付款" : "已退款"))
    },
    //获取用户id
    getUserId() {
      this.$http
        .post(
          "/api/address/getUserId",
          "token=" + sessionStorage.getItem("token")
        )
        .then((res) => {
          this.userId = res.data.userId;
        });
    },
    refund(id, serialNumber, cost) {
      if(!confirm("是否要退款？")) {
        return;
      }
      this.$axios({
        url: '/api/alipay/tk',
        method: 'post',
        data: {
          orderId: id,
          cost,
          serialNumber,
        }
      }).then(rs => {
        if(rs.data.code == 5200) {
          this.$message.success(rs.data.msg);
          window.location.reload(); 
        }else {
          this.$message.error(rs.data.msg)
        }
      })
    },
    closeOrder(id) {
      if(!confirm("是否要关闭订单？关闭后则无法支付！")) {
        return;
      }
      this.$axios({
        url: '/api/order/close',
        method: 'post',
        data: {
          orderId: id,
        }
      }).then(rs => {
        console.log(rs);
        if(rs.data.code == 5200) {
          this.$message.success(rs.data.msg);
          window.location.reload(); 
        }else {
          this.$message.error(rs.data.msg)
        }
      })
    }
  },
  created() {
    let type = sessionStorage.getItem("type");
    if(!type || type == 0) {
      this.$message.error("权限不足，将回到首页！")
      this.$router.push({
        name: 'IndexCenter'
      })
      return;
    }
    this.getAllOrderList();
    this.getUserId();
  },
};
</script>

<style>
.orderTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}
.orderTable td {
  border: 0.1px solid rgba(94, 92, 92, 0.137);
  text-align: left;
  padding-left: 1rem;
}
.orderTable tr:nth-of-type(1) {
  background-color: #f0f0f0;
}
.orderTable td:nth-of-type(1) {
  width: 20%;
}
.orderTable td:nth-of-type(2) {
  width: 35%;
}
.orderTable td:nth-of-type(3) {
  width: 25%;
}
.orderTable td:nth-of-type(4) {
  width: 10%;
}
.orderTable td:nth-of-type(5) {
  width: 10%;
}
.orderDetailTable {
  width: 100%;
}
.page {
  width: 100%;
  padding: 2rem;
  text-align: center;
}
.status1 {
  background-color: #F56C6C;border-radius: 4px 4px;padding:0.2rem
}
.status2 {
  background-color: #85CE61;border-radius: 4px 4px;padding:0.2rem
}
.status3 {
  background-color: #A6A9AD;border-radius: 4px 4px;padding:0.2rem
}
.status4 {
  background-color: #cb8f5e;border-radius: 4px 4px;padding:0.2rem
}
</style>